import axios from "axios";
import React, { Component } from "react";
import {Link} from 'react-router-dom';

export default class VideoList extends Component {
    state = {
        //1. 状态 用来保存获取到的视频
        videos: [],
    };

    render() {
        return (
            <div className="container">
                <button onClick={() => {
                    this.props.history.go(1);
                }}>向前</button>
                <h2>视频列表</h2>
                <hr />
                <div className="row">
                    {
                        this.state.videos.map(item => {
                            return <div className="col-xs-3" key={item.id}>
                                        <div
                                            className="img"
                                            style={{ height: "200px", overflow: "hidden" }}
                                        >
                                                <img
                                                className="img-responsive"
                                                src={"http://cdn.xiaohigh.com" + item.cover_local}
                                                alt=""
                                                onClick={this.check(item.id)}
                                            />
                                        </div>
                                        <h6 style={{textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap'}}>{item.desc}</h6>
                                    </div>
                        })
                    }
                    
                </div>
            </div>
        );
    }

    //切换路由
    check = (id) => {
        return () => {
            //调用方法 push 切换路由
            //params
            this.props.history.push('/video/' + id);
            //query
            // this.props.history.push('/video?id=' + id);
            //state
            // this.props.history.push({
            //     pathname: '/video',
            //     state: {
            //         id: id
            //     }
            // })

            //replace 方法切换路由  替换   用法与 push 完全相同
            // this.props.history.replace({
            //     pathname: '/video',
            //     state: {
            //         id: id
            //     }
            // })

        }
    }

    async componentDidMount() {
        //发送请求
        let result = await axios.get('http://api.xiaohigh.com/douyin');
        //输出结果
        // console.log(result);
        //设置状态
        this.setState({
            videos: result.data
        })
    }

    //   http://api.xiaohigh.com/douyin
}
